<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
      <el-form :inline="true" :model="filters" :size="size" ref="filters" label-width="160px">
        <el-form-item>
          <el-input v-model="filters.warehouseCode" clearable placeholder="仓库编码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="filters.warehouseName" clearable placeholder="仓库名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="filters.warehouseOwnership" clearable placeholder="仓库归属">
            <el-option label="自有" value="0"></el-option>
            <el-option label="第三方" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="filters.warehouseType" clearable placeholder="仓库类型" style="padding-right: 17px;">
            <el-option label="中心仓" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <v-distpicker @selected='selectAddress' :province="filters.provinceValue" :city="filters.cityValue" :area="filters.areaValue"></v-distpicker>
        </el-form-item>

        <!-- 查询  重置 -->
        <el-row class="search">
          <el-form-item>
            <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findPage(null)"/>
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-plus" :label="$t('action.add')" type="primary" @click="handleAdd"/>
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary"
                       @click="resetForm('filters')"/>
          </el-form-item>
        </el-row>

      </el-form>
    </div>

    <div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
      <!--表格显示列界面-->
      <table-column-filter-dialog ref="tableColumnFilterDialog" :columns="columns" @handleFilterColumns="handleFilterColumns"></table-column-filter-dialog>
    </div>

    <!--仓库列表显示-->
    <cy-table
      :height="350"
      :content="pageResult"
      :totalSize="totalCount"
      :columns="filterColumns"
      :showSelection="false"
      :showBatchDelete="false"
      :showBatchReview="false"
      :showDeleteOperation="false"
      :showEditOperation="true"
      @findPage="findPage"
      @handleEdit="handleEditFunction"
      ref="CyTable"></cy-table>

    <!--新增编辑界面-->
    <el-dialog :title="operation ? '新增仓库信息':'编辑仓库信息'" width="70%" :visible.sync="editDialogVisible"
               :close-on-click-modal="false">
      <!--input输入框-->
      <el-form
        :model="dataForm" :inline="true" :rules="dataFormRules" ref="dataForm" :size="size" label-width="100px"
        label-position="right">
        <el-row>
          <el-col :span="8">
            <el-form-item label="仓库编码：" prop="warehouseCode">
              <el-input v-model="dataForm.warehouseCode" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库名称：" prop="warehouseName">
              <el-input v-model="dataForm.warehouseName" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库类型：" prop="warehouseType">
              <el-select v-model="dataForm.warehouseType" auto-complete="off">
                <el-option label="中心仓" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="负责人：" prop="warehouseManager">
              <el-input v-model="dataForm.warehouseManager" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人电话：" prop="warehousePhone">
              <el-input v-model="dataForm.warehousePhone" auto-complete="off" minlength="11" maxlength="11"
                        show-word-limit></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库归属：" prop="warehouseOwnership">
              <el-radio-group v-model="dataForm.warehouseOwnership" @change="radioChange">
                <el-radio
                  v-for="item in radioStatus"
                  :key="item.value"
                  :value="item.value"
                  :label="item.value">{{item.label}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="仓库地址：">
              <v-distpicker
                @selected='selectAddress1' :province="dataForm.provinceValue" :city="dataForm.cityValue" :area="dataForm.areaValue"></v-distpicker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="详细地址：" prop="warehouseAddress" width="100%">
              <el-input v-model="dataForm.warehouseAddress" type="textarea" auto-complete="off" style="width: 30rem;"
                        maxlength="150" show-word-limit></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="备注：" prop="warehouseRemark">
              <el-input type="" v-model="dataForm.warehouseRemark" type="textarea" auto-complete="off"
                        style="width: 30rem;" maxlength="150" show-word-limit></el-input>
            </el-form-item>
          </el-col>
        </el-row>

<!--        <el-row>-->
<!--          <el-col>-->
<!--            <el-form-item label="覆盖区域：">-->
<!--              <el-button size="mini" type="primary">区域编辑</el-button>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
      </el-form>

      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="editDialogVisible = false">{{$t('action.cancel')}}</el-button>
        <el-button :size="size" type="primary" @click.native="submitForm">{{$t('action.submit')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import CyTable from "@/views/Core/ProductTable";
  import KtButton from "@/views/Core/KtButton";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  import VDistpicker from 'v-distpicker';

  export default {
    components: {
      CyTable,
      KtButton,
      VDistpicker,
      TableColumnFilterDialog
    },
    data() {
      return {
        size: "small",
        filters: {},
        radioStatus: [
          {label: "自有", value: 0, checked: true},
          {label: "第三方", value: 1}
        ],
        totalCount: 0,
        filterColumns: [],
        columns: [
          {prop: "warehouseCode", label: "仓库编码", minWidth: 120},
          {prop: "warehouseName", label: "仓库名称", minWidth: 120},
          {
            prop: "warehouseType", label: "仓库类型", minWidth: 120,
            formatter: function (row, column, cellValue, index) {
              if (cellValue == 0) {
                return "中心仓"
              }
            }
          },
          {
            prop: "warehouseOwnership", label: "仓库归属", minWidth: 120,
            formatter: function (row, column, cellValue, index) {
              if (cellValue == 0) {
                return "自有"
              } else if (cellValue == 1) {
                return "第三方"
              }
            }
          },
          // {prop: "merchantId", label: "商家名称", minWidth: 120},
          {prop: "provinceValue", label: "省", minWidth: 50},
          {prop: "cityValue", label: "市", minWidth: 50},
          {prop: "areaValue", label: "区", minWidth: 50},
          {prop: "warehouseManager", label: "仓库负责人", minWidth: 120},
          {prop: "warehousePhone", label: "负责人电话", minWidth: 120},
        ],
        dataFormRules: {
          warehouseCode: [{required: true, message: "请输入仓库编码", trigger: "blur"}],
          warehouseName: [{required: true, message: "请输入仓库名称", trigger: "blur"}],
          warehouseType: [{required: true, message: "请输入仓库类型", trigger: "change"}],
        },
        dataForm: {
          warehouseCode: '',
          warehouseName: '',
          provinceValue: '',
          cityValue: '',
          areaValue: '',
          warehouseAddress: '',
          warehouseType: '0',
          warehouseOwnership: 0,
          warehouseManager: '',
          warehousePhone: '',
          warehouseRemark: '',
        },
        pageRequest: {pageNum: 1, pageSize: 10},
        pageResult: [],
        operation: false, // true:新增, false:编辑
        editDialogVisible: false, // 新增编辑界面是否显示
      };
    },

    methods: {
      // 获取分页数据
      findPage: function (params) {
        let this_ = this;
        if (params == undefined || params == null) {
          params = {
            pageNum: this_.pageRequest.pageNum,
            pageSize: this_.pageRequest.pageSize
          };
        }
        if (this_.filters == undefined || this_.filters == null) {
          this_.filters = {};
        }
        this_.filters.start = params.pageNum;
        this_.filters.limit = params.pageSize;
        this.utils.request.warehouseManagementApi(this_.filters, function (res) {
          this_.pageResult = res.data.rows;
          this_.totalCount = Number(res.data.total);
        });
      },

      // 清空文本值
      resetForm() {
        this.filters = {};
        this.findPage();
      },

      // radio框选择
      radioChange(e) {
        this.dataForm.radioStatus = e.toString()
      },

      // 编辑
      handleEditFunction(data) {
        let this_ = this;
        this_.editDialogVisible = true;
        this_.operation = false;
        this_.dataForm = Object.assign({}, data.row);
        this_.dataForm.warehouseType = data.row.warehouseType.toString();
        if (this_.$refs["dataForm"]) {
          this_.$refs["dataForm"].clearValidate();
        }
      },

      // 新增
      handleAdd() {
        let this_ = this;
        this_.editDialogVisible = true;
        this_.operation = true;
        this_.dataForm = {
          warehouseCode: '',
          warehouseName: '',
          provinceValue: '',
          cityValue: '',
          areaValue: '',
          warehouseAddress: '',
          warehouseType: '0',
          warehouseOwnership: 0,
          warehouseManager: '',
          warehousePhone: '',
          warehouseRemark: '',
        };
        if (this_.$refs["dataForm"]) {
          this_.$refs["dataForm"].clearValidate();
        }
      },

      // 提交
      submitForm: function () {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            let this_ = this;
            let params = Object.assign({}, this.dataForm);
            params.warehouseType = 0;
            if (params.provinceValue == "省") {
              params.provinceValue = "";
            }
            if (params.cityValue == "市") {
              params.cityValue = "";
            }
            if (params.areaValue == "区") {
              params.areaValue = "";
            }
            this.utils.request.warehouseManagementAddApi(params, function (data) {
              if (data.code == "0000") {
                this_.editDialogVisible = false;
                this_.resetForm();
                this_.$message({message: "操作成功", type: "success"});
              } else {
                this_.$message({message: "操作失败", type: "error"});
              }
            });
          }
        })
      },

      // 查询省市县联动
      selectAddress(data) {
        this.filters.provinceValue= data.province.value
        this.filters.cityValue= data.city.value
        this.filters.areaValue= data.area.value
      },

      // 新增和修改省市县联动
      selectAddress1(data) {
        this.dataForm.provinceValue = data.province.value
        this.dataForm.cityValue = data.city.value
        this.dataForm.areaValue = data.area.value
      },

      // 处理表格列过滤显示
      displayFilterColumnsDialog: function () {
        this.$refs.tableColumnFilterDialog.setDialogVisible(true);
      },
      // 处理表格列过滤显示
      handleFilterColumns: function (data) {
        this.filterColumns = data.filterColumns;
        this.$refs.tableColumnFilterDialog.setDialogVisible(false);
      },
      // 处理表格列过滤显示
      initColumns: function () {
        var temp = [];
        $.each(this.columns, function (key, val) {
          temp.push(val);
        });
        this.filterColumns = temp;
      },
    },

    mounted() {
      this.initColumns();
    }
  };
</script>

<style scoped>
  /* 设置本页面的日期选择组件样式 */
  .distpicker-address-wrapper /deep/ select {
    width: 110px;
    height: 32px;
    line-height: 32px;
    padding: 0 10px;
    box-sizing: border-box;
  }

  /deep/ .el-form-item__content {
    width: 160px;
    margin-right: 15px;
  }

  .distpicker-address-wrapper {
    width: 400px;
    height: 32px;
    line-height: 32px;
  }

  .search /deep/ .el-form-item__content {
    width: 70px;
    margin-right: 0;
  }

  /* 设置el-item的右边距 */
  .el-form--inline .el-form-item {
    display: inline-block;
    margin-right: 6px;
    vertical-align: top;
  }
</style>
